<template>
    <div class="evaluationRecord app-container">
      <div class="__page">
        <el-form :inline="true" ref="formInline" :model="formInline" class="demo-form-inline">
          <el-form-item label="买受人名称:">
            <el-input prefix-icon="el-icon-search" v-model="formInline.bidder_name" placeholder="买受人名称" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="评价时间:">
            <el-date-picker
              v-model="formInline.startEndTime"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              size="mini"
              style="width: 100%;">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="标的名称:">
            <el-input prefix-icon="el-icon-search" v-model="formInline.lots_name" placeholder="标的名称" size="mini"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searching" size="mini">检索</el-button>
            <el-button size="mini" @click="restert">重置</el-button>
          </el-form-item>
        </el-form>
        <div class="select_radio">
          <el-radio-group v-model="classify" size="small" fill="#409EFF" @input="daysSelectOnly">
            <el-radio-button label="1">买家评价</el-radio-button>
            <el-radio-button label="2">服务单位评价</el-radio-button>
          </el-radio-group>
        </div>
        <div class="table_box">
          <el-table
            :data="tableData"
            border
            stripe
            height="630"
            style="width: 100%"
            :header-cell-style="{background:'#f5f7fa'}">
            <el-table-column label="买受人名称" prop="name" align="center" width="200">
            </el-table-column>
            <el-table-column label="评价时间" prop="create_time" align="center" width="200">
            </el-table-column>
            <el-table-column label="标的名称" prop="lots_name" align="center" width="200">
            </el-table-column>
            <el-table-column label="星级" align="center" width="200">
              <template slot-scope="scope">
                  <!-- <span>{{scope.row.position}}</span> -->
                  <i class="el-icon-star-on" :style="{color:scope.row.score>=1?'#67C23A':'#909399'}"></i>
                  <i class="el-icon-star-on" :style="{color:scope.row.score>=2?'#67C23A':'#909399'}"></i>
                  <i class="el-icon-star-on" :style="{color:scope.row.score>=3?'#67C23A':'#909399'}"></i>
                  <i class="el-icon-star-on" :style="{color:scope.row.score>=4?'#67C23A':'#909399'}"></i>
                  <i class="el-icon-star-on" :style="{color:scope.row.score>=5?'#67C23A':'#909399'}"></i>
                  <span>{{scope.row.score}}</span>
              </template>
            </el-table-column>
            <el-table-column label="评语" prop="fact_describe" align="center">
            </el-table-column>
          </el-table>

          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[7, 20, 30, 40]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </template>
  
  <script>
import {scoreList} from '@/api/release'
import {dateOrTime} from '@/utils/index'
  
  export default {
    name: 'evaluationRecord',
    data(){
      return{
        formInline:{
          bidder_name: '',
          startEndTime:'',
          lots_name:''
        },
        classify:'1',
        page:1,
        limit:10,
        total:0,
        tableData:[{name:'0000',position:3}],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    },
    mounted(){
      this.list();
    },
    methods:{
      list(){
        if(this.formInline.startEndTime){
          var start = dateOrTime(this.formInline.startEndTime[0]);
          var end = dateOrTime(this.formInline.startEndTime[1]);
        }
        let obj = {
          bidder_name:this.formInline.bidder_name,
          lots_name:this.formInline.lots_name,
          start_time:start,
          end_time:end,
          page:this.page,
          limit:this.limit
        }
        scoreList(obj).then(res =>{
          this.tableData = res.data;
          this.total = res.count;
        })
      },
      searching(){
        this.list();
      },
      restert(){
        this.formInline={
          bidder_name: '',
          startEndTime:'',
          lots_name:''
        };
      },
      daysSelectOnly(label){
        // console.log(label);
      },
      // 分页
      handleSizeChange(val) {
        this.limit = val
        this.list()
      },
      // 分页
      handleCurrentChange(val) {
        this.page = val
        this.list()
      },
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .evaluationRecord {
    .select_radio{
      margin-bottom: 10px;
    }
  }
  </style>
  